<template>
  <div>
    <el-card :style="{marginTop:top+'px',width: 400+'px',height: 430+'px',margin: 'auto'}">
      <div style="text-align: center">
        <h3>系统登录</h3>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="name">
            <el-input v-model="form.username" placeholder="请输入账号" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="iconfont icon-lock"></el-input>
          </el-form-item>
          <el-form-item prop="verifycode">
            <el-row>
              <el-col :span="11">
                <el-input v-model="form.verifycode"  placeholder="请输入验证码" ></el-input>
              </el-col>
              <el-col :span="11" :offset="2">
                <img src="../assets/111.jpg"/>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="7">
                <el-switch v-model="value3" active-text="记住我"></el-switch>
              </el-col>
              <el-col :span="17">
                <span style="color: red;">{{loginerror}}</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="11">
                <el-button  style="width: 100%">重置</el-button>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-button  type="primary" style="width: 100%" @click="submitForm('form')">登录</el-button>
              </el-col>
            </el-row>


          </el-form-item>
        </el-form>

      </div>
    </el-card>
  </div>

</template>

<script>
  import axios from "axios"
  import qs from "qs"
    export default {
      data(){
        return{
          value3: true,
          loginerror:"",
          top:0,
          form:{
            username:"",
            password:"",
            verifycode:"",
            rememberMe:true
          },

          rules: {
            username: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到10 个字符', trigger: 'blur' }
            ],
          },
        }
      },

      methods:{

        submitForm(formName) {
          var that = this;
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //去后台登录
              // alert("校验成功")
              axios.post("/sys/hnlogin",qs.stringify(that.form)).then(res=>{
                if(res.data.code=='200'){
                  that.$router.push("/home")
                }else{
                  that.loginerror = res.data.message;
                }
              })



            } else {
              return false;
            }
          });
        },

      },
      mounted(){
        var that = this;
        this.top = document.documentElement.clientHeight/2 -215;
        window.onresize=function () {
          that.top = document.documentElement.clientHeight/2 -215;
        }

      }



    }
</script>

<style scoped>

</style>
